
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Awesome go-echarts</title>
    <script src="http://127.0.0.1:8083/assets/echarts.min.js"></script>
    <script src="https://go-echarts.github.io/go-echarts-assets/assets/echarts.min.js"></script>
    <script src="https://go-echarts.github.io/go-echarts-assets/assets/themes/macarons.js"></script>
    <link href="http://127.0.0.1:8083/assets/bulma.min.css" rel="stylesheet">
    <link href="https://go-echarts.github.io/go-echarts-assets/assets/bulma.min.css" rel="stylesheet">
</head>

<body>
<div class="select" style="margin-right:10px; margin-top:10px; position:fixed; right:10px;">
    <select onchange="window.location.href=this.options[this.selectedIndex].value">
        <option value="http://127.0.0.1:8080/bar">Bar-(柱状图)</option>
        <option value="http://127.0.0.1:8080/bar3D">Bar3D-(3D 柱状图)</option>
        <option value="http://127.0.0.1:8080/boxPlot">BoxPlot-(箱线图)</option>
        <option value="http://127.0.0.1:8080/effectScatter">EffectScatter-(动态散点图)</option>
        <option value="http://127.0.0.1:8080/funnel">Funnel-(漏斗图)</option>
        <option value="http://127.0.0.1:8080/gauge">Gauge-仪表盘</option>
        <option value="http://127.0.0.1:8080/geo">Geo-地理坐标系</option>
        <option value="http://127.0.0.1:8080/graph">Graph-关系图</option>
        <option value="http://127.0.0.1:8080/heatMap">HeatMap-热力图</option>
        <option value="http://127.0.0.1:8080/kline">Kline-K 线图</option>
        <option value="http://127.0.0.1:8080/line">Line-(折线图)</option>
        <option value="http://127.0.0.1:8080/line3D">Line3D-(3D 折线图)</option>
        <option value="http://127.0.0.1:8080/liquid">Liquid-(水球图)</option>
        <option value="http://127.0.0.1:8080/map">Map-(地图)</option>
        <option value="http://127.0.0.1:8080/overlap">Overlap-(重叠图)</option>
        <option value="http://127.0.0.1:8080/parallel">Parallel-(平行坐标系)</option>
        <option value="http://127.0.0.1:8080/pie">Pie-(饼图)</option>
        <option value="http://127.0.0.1:8080/radar">Radar-(雷达图)</option>
        <option value="http://127.0.0.1:8080/sankey">Sankey-(桑基图)</option>
        <option value="http://127.0.0.1:8080/scatter">Scatter-(散点图)</option>
        <option value="http://127.0.0.1:8080/scatter3D">Scatter-(3D 散点图)</option>
        <option value="http://127.0.0.1:8080/surface3D">Surface3D-(3D 曲面图)</option>
        <option value="http://127.0.0.1:8080/themeRiver">ThemeRiver-(主题河流图)</option>
        <option value="http://127.0.0.1:8080/wordCloud">WordCloud-(词云图)</option>
        <option value="http://127.0.0.1:8080/page">Page-(顺序多图)</option>
    </select></div>

    
<div class="container">
    <div class="item" id="othgBzjLGXbG"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_othgBzjLGXbG = echarts.init(document.getElementById('othgBzjLGXbG'), "white");
    let option_othgBzjLGXbG = {
        title: {"text":"Bar-示例图",},
        tooltip: {},
        legend: {},
        toolbox: {"show":true,"feature":{"saveAsImage":{},"dataZoom":{},"dataView":{},"restore":{}}},
        xAxis: [{"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","data":[43,21,8,48,43,32],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"商家B","type":"bar","data":[2,41,45,30,48,44],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_othgBzjLGXbG.setOption(option_othgBzjLGXbG);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="juELXqibjAIL"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_juELXqibjAIL = echarts.init(document.getElementById('juELXqibjAIL'), "white");
    let option_juELXqibjAIL = {
        title: {"text":"Bar-标题","subtext":"我是副标题，相对来讲我会长一点","right":"40%"},
        tooltip: {},
        legend: {"right":"80%",},
        toolbox: {"show":true,"feature":{"saveAsImage":{},"dataZoom":{},"dataView":{},"restore":{}}},
        xAxis: [{"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","data":[45,46,11,12,14,14],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"商家B","type":"bar","data":[11,22,23,14,37,32],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_juELXqibjAIL.setOption(option_juELXqibjAIL);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="yPoazxsbuZMX"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_yPoazxsbuZMX = echarts.init(document.getElementById('yPoazxsbuZMX'), "white");
    let option_yPoazxsbuZMX = {
        title: {"text":"Bar-显示 Label",},
        tooltip: {},
        legend: {},
        xAxis: [{"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","data":[6,22,8,16,34,21],"label":{"show":true},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"商家B","type":"bar","data":[7,33,29,41,38,31],"label":{"show":true},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_yPoazxsbuZMX.setOption(option_yPoazxsbuZMX);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="owQubfQDaTaK"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_owQubfQDaTaK = echarts.init(document.getElementById('owQubfQDaTaK'), "white");
    let option_owQubfQDaTaK = {
        title: {"text":"Bar-XY 轴名称",},
        tooltip: {},
        legend: {},
        xAxis: [{"name":"商品名称","data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"name":"销售量","axisLabel":{"show":true},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","data":[10,12,6,30,42,5],"label":{"show":true},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"商家B","type":"bar","data":[49,19,22,9,11,25],"label":{"show":true},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_owQubfQDaTaK.setOption(option_owQubfQDaTaK);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="nBmvBHOXsjDd"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_nBmvBHOXsjDd = echarts.init(document.getElementById('nBmvBHOXsjDd'), "white");
    let option_nBmvBHOXsjDd = {
        title: {"text":"Bar-设置系列颜色",},
        tooltip: {},
        legend: {},
        xAxis: [{"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","data":[28,13,38,33,24,33],"label":{"show":true},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"商家B","type":"bar","data":[13,24,27,46,3,18],"label":{"show":true},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["pink","lightblue","#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_nBmvBHOXsjDd.setOption(option_nBmvBHOXsjDd);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="kUDMsPpNkYYQ"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_kUDMsPpNkYYQ = echarts.init(document.getElementById('kUDMsPpNkYYQ'), "white");
    let option_kUDMsPpNkYYQ = {
        title: {"text":"Bar-显示分割线",},
        tooltip: {},
        legend: {},
        xAxis: [{"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true},"splitArea":{"show":false,},"splitLine":{"show":true,}}],
        series: [
        {"name":"商家A","type":"bar","data":[0,36,11,3,33,30],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"商家B","type":"bar","data":[26,9,3,49,42,15],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_kUDMsPpNkYYQ.setOption(option_kUDMsPpNkYYQ);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="gjKkgrQYVIOQ"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_gjKkgrQYVIOQ = echarts.init(document.getElementById('gjKkgrQYVIOQ'), "white");
    let option_gjKkgrQYVIOQ = {
        title: {"text":"Bar-调整 bar 距离",},
        tooltip: {},
        legend: {},
        xAxis: [{"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","barCategoryGap":"70%","data":[37,24,46,39,34,39],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_gjKkgrQYVIOQ.setOption(option_gjKkgrQYVIOQ);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="OVyRGjdiGshP"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_OVyRGjdiGshP = echarts.init(document.getElementById('OVyRGjdiGshP'), "white");
    let option_OVyRGjdiGshP = {
        title: {"text":"Bar-Y 轴格式",},
        tooltip: {},
        legend: {},
        xAxis: [{"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true,"formatter":"{value} 件/天"},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","data":[8,3,11,34,23,23],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"商家B","type":"bar","data":[9,23,32,37,30,2],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_OVyRGjdiGshP.setOption(option_OVyRGjdiGshP);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="VThZntNCMVmr"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_VThZntNCMVmr = echarts.init(document.getElementById('VThZntNCMVmr'), "white");
    let option_VThZntNCMVmr = {
        title: {"text":"Bar-多 Y 轴",},
        tooltip: {},
        legend: {},
        xAxis: [{"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true,"formatter":"{value} 件/天"},"splitArea":{"show":false,},"splitLine":{"show":false,}},{"axisLabel":{"show":true,"formatter":"{value} 件/月"},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","data":[46,32,19,35,9,18],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"商家B","type":"bar","yAxisIndex":1,"data":[18,47,38,42,7,48],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_VThZntNCMVmr.setOption(option_VThZntNCMVmr);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="PlURCyLrxwYg"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_PlURCyLrxwYg = echarts.init(document.getElementById('PlURCyLrxwYg'), "white");
    let option_PlURCyLrxwYg = {
        title: {"text":"Bar-多 X 轴",},
        tooltip: {},
        legend: {},
        xAxis: [{"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}},{"data":["面包","牛奶","奶茶","棒棒糖","加多宝","可口可乐"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true,"formatter":"{value} 件/天"},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","data":[39,0,29,12,0,36],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"商家B","type":"bar","xAxisIndex":1,"data":[40,49,10,0,33,44],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_PlURCyLrxwYg.setOption(option_PlURCyLrxwYg);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="uZKRHvOgOaiW"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_uZKRHvOgOaiW = echarts.init(document.getElementById('uZKRHvOgOaiW'), "white");
    let option_uZKRHvOgOaiW = {
        title: {"text":"Bar-DataZoom",},
        tooltip: {},
        legend: {},
        toolbox: {"show":true,"feature":{"saveAsImage":{},"dataZoom":{},"dataView":{},"restore":{}}},
        dataZoom:[{"type":"","start":50,"end":100,"xAxisIndex":[0]}],
        xAxis: [{"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","data":[45,19,8,4,41,17],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"商家B","type":"bar","data":[27,31,3,48,38,15],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_uZKRHvOgOaiW.setOption(option_uZKRHvOgOaiW);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="zPWoMKilYQPL"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_zPWoMKilYQPL = echarts.init(document.getElementById('zPWoMKilYQPL'), "white");
    let option_zPWoMKilYQPL = {
        title: {"text":"Bar-翻转 XY 轴",},
        tooltip: {},
        legend: {},
        xAxis: [{"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true},"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","data":[18,40,32,45,29,7],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"商家B","type":"bar","data":[36,26,27,38,22,37],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_zPWoMKilYQPL.setOption(option_zPWoMKilYQPL);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="bYqfpErjyGiz"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_bYqfpErjyGiz = echarts.init(document.getElementById('bYqfpErjyGiz'), "white");
    let option_bYqfpErjyGiz = {
        title: {"text":"Bar-堆叠效果",},
        tooltip: {},
        legend: {},
        xAxis: [{"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","stack":"stack","data":[45,30,36,17,7,48],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"商家B","type":"bar","stack":"stack","data":[23,44,1,18,37,33],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_bYqfpErjyGiz.setOption(option_bYqfpErjyGiz);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="tolUTjHStFAf"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_tolUTjHStFAf = echarts.init(document.getElementById('tolUTjHStFAf'), "white");
    let option_tolUTjHStFAf = {
        title: {"text":"Bar-标记线\u0026标记点",},
        tooltip: {},
        legend: {},
        xAxis: [{"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","data":[30,20,13,12,21,15],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"data":[{"name":"最大值","type":"max"}],"symbolSize":20,"label":{"show":true}},"markPoint":{"data":[{"name":"最大值点","type":"max"}],"label":{"show":true}},},
        {"name":"商家B","type":"bar","data":[15,12,19,7,32,27],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"data":[{"name":"最大值","type":"max"}],"symbolSize":20,"label":{"show":true}},"markPoint":{"data":[{"name":"最大值点","type":"max"}],"label":{"show":true}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_tolUTjHStFAf.setOption(option_tolUTjHStFAf);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="NKxwQPkOgUBD"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_NKxwQPkOgUBD = echarts.init(document.getElementById('NKxwQPkOgUBD'), "macarons");
    let option_NKxwQPkOgUBD = {
        title: {"text":"Bar-自定义标记+主题",},
        tooltip: {},
        legend: {},
        xAxis: [{"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","data":[48,4,11,30,4,4],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"商家B","type":"bar","data":[16,46,32,42,21,4],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"data":[{"name":"Y 值为 5","yAxis":20},[{"name":"自定义标记线","coord":["衬衫",10]},{"coord":["羊毛衫",40]}]],"symbolSize":20,"label":{"show":true}},"markPoint":{"label":{"show":false}},},
        ],
    };
    myChart_NKxwQPkOgUBD.setOption(option_NKxwQPkOgUBD);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="ObaezmHJlbPZ"
         style="width:600px;height:400px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_ObaezmHJlbPZ = echarts.init(document.getElementById('ObaezmHJlbPZ'), "white");
    let option_ObaezmHJlbPZ = {
        title: {"text":"Bar-画布大小",},
        tooltip: {},
        legend: {},
        toolbox: {"show":true,"feature":{"saveAsImage":{},"dataZoom":{},"dataView":{},"restore":{}}},
        xAxis: [{"data":["衬衫","牛仔裤","运动裤","袜子","冲锋衣","羊毛衫"],"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        yAxis: [{"axisLabel":{"show":true},"splitArea":{"show":false,},"splitLine":{"show":false,}}],
        series: [
        {"name":"商家A","type":"bar","data":[4,44,19,46,4,2],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        {"name":"商家B","type":"bar","data":[24,3,25,14,47,10],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_ObaezmHJlbPZ.setOption(option_ObaezmHJlbPZ);
</script>

    <br/>
<style>
    .container {display: flex;justify-content: center;align-items: center;}
    .item {margin: auto;}
</style>
</body>
</html>
